import React from "react";
import ShowList from "../../components/showList";
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  Image,
  Platform,
  StatusBar,
  ScrollView,
} from "react-native";
import Toast from "react-native-root-toast";
import { FontAwesome5 } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

const SameComGoods = ({ navigation, route }) => {
  const { comGoods } = route.params;
  console.log(comGoods);

  return (
    <View style={styles.container}>
      <View>
        {/* <View style={styles.part2}>
          <Image
            style={{ width: 20, height: 20, margin: 7 }}
            source={require("../../../assets/dingwei.png")}
          />
          <View>
            <Text style={{ marginTop: 10 }}>
              {comGoods[0].company.company_name}
            </Text>
            <Text
              style={{
                fontSize: 12,
                color: "#888",
                marginTop: 6,
                // marginBottom: 10,
              }}
            >
              {comGoods[0].company.address +
                " | " +
                comGoods[0].company.detailed_address}
            </Text>
            <View
              style={{
                flexDirection: "row",
                marginTop: 8,
                marginBottom: 10,
              }}
            >
              <View style={[styles.tagStyle]}>
                <FontAwesome5
                  name="user-alt"
                  size={11.5}
                  color="#6bc96e"
                  style={{ margin: 2 }}
                />
                <Text style={{ color: "#888", fontSize: 12 }}>
                  {comGoods[0].company.admin_name}
                </Text>
              </View>
              {comGoods[0].company.wechat ? (
                <TouchableOpacity
                  style={[
                    styles.tagStyle,
                    { backgroundColor: "#bff9d16e", marginLeft: 10 },
                  ]}
                  onPress={() => {
                    Clipboard.setString(comGoods[0].company.admin_wechat);
                    Toast.show("已复制");
                  }}
                >
                  <AntDesign
                    name="wechat"
                    size={13.5}
                    color="#6bc96e"
                    style={{ margin: 1.5 }}
                  />
                  <Text style={{ color: "#888", fontSize: 12 }}>
                    {comGoods[0].company.admin_wechat}
                  </Text>
                </TouchableOpacity>
              ) : null}
              <TouchableOpacity
                style={[styles.tagStyle, { marginLeft: 10 }]}
                onPress={() => {
                  Clipboard.setString(comGoods[0].company.admin_phone);
                  Toast.show("已复制");
                }}
              >
                <Entypo
                  name="old-phone"
                  size={13.5}
                  color="#6bc96e"
                  style={{ margin: 1.5 }}
                />
                <Text style={{ color: "#888", fontSize: 12 }}>
                  {comGoods[0].company.admin_phone}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View> */}
        <ScrollView
          vertical={true}
          showsVerticalScrollIndicator={true} // 隐藏垂直指示器
        >
          <View style={{ alignItems: "center" }}>
            <View
              style={{
                flexDirection: "column",
                marginBottom: 100,
                justifyContent: "center",
              }}
            >
              {comGoods.map((item, index) => {
                return (
                  <ShowList
                    key={index}
                    showData={{
                      image: item.image,
                      title:
                        item.basePlate.category +
                        item.basePlate.type +
                        "*" +
                        item.shroudPlate.category +
                        item.shroudPlate.type,
                      price: item.price,
                      company: item.company.company_name,
                    }}
                    onQuery={() =>
                      navigation.navigate("GoodsDetail", { queryDetail: item })
                    }
                  ></ShowList>
                );
              })}
            </View>
            {/* <View style={{ marginTop: 110 }}>
            <Text style={{ fontSize: 14, color: "#999" }}>
              {comGoods.length ? "已经到底了哦 > ^ <" : "暂无数据"}
            </Text>
          </View> */}
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fff",
    justifyContent: "center",
  },
  part2: {
    marginLeft: 20,
    marginRight: 20,
    marginTop: 15,
    alignItems: "center",
    flexDirection: "row",
    borderRadius: 10,
    backgroundColor: "#eeeeee7a",
  },
  tagStyle: {
    backgroundColor: "#f9eabf6e",
    flexDirection: "row",
    justifyContent: "center",
    paddingLeft: 3,
    paddingRight: 3,
    borderRadius: 6,
  },
});

export default SameComGoods;
